<template>
  <div class="el-card__body">
    <avue-crud
      :option="options"
      :data="tableData"
      :page.sync="page"
      :table-loading="loading"
      :before-open="beforeOpen"
      @on-load="getList"
      @row-update="handleUpdate"
      @row-del="handleDel"
      @row-save="handleSave"
      @refresh-change="refreshChange"
      v-model="form"
    >
      <template slot="img_url" slot-scope="scope">
        <ImagePreview
          :imageUrl="scope.row.img_url"
        />
      </template>
      <template slot="img_urlForm" slot-scope="scope">
        <UploadImg
          :img_url="
            isEdit
              ? scope.row.img_url
              : ''
          "
          @getImgs="getImgs"
        />
      </template>
      <template slot="describe" slot-scope="scope">
        <div style="max-height:100px;overflow-y:auto;padding:0 10px">
          {{ scope.row.describe }}
        </div>
      </template>
      <template slot="category_Info" slot-scope="scope">
        <div v-if="scope.row.category_Info">
          {{ scope.row.category_Info.name }}
        </div>
      </template>
      <template slot="category_idForm" slot-scope="scope">
        <el-select v-model="scope.row.category_id" placeholder="请选择">
          <el-option
            v-for="item in categoryList"
            :key="item._id"
            :label="item.name"
            :value="item._id"
          >
          </el-option>
        </el-select>
      </template>
    </avue-crud>
  </div>
</template>

<script>
import { options } from "@/options/project.js";
import {
  getProjectList,
  editProject,
  saveProject,
  delProject,
} from "@/API/projectApi.js";
import { getList as getList2 } from "@/API/projectCate";
import UploadImg from "@/components/uploadImg";
import ImagePreview from "@/components/ImagePreview";
export default {
  name: "",
  components: {
    UploadImg,
    ImagePreview,
  },
  data() {
    return {
      form: {},
      options: options,
      page: {
        pageSize: 10,
      },
      tableData: [],
      img_url: "",
      isEdit: true,
      loading: false,
      categoryList: [],
      categoryId:''
    };
  },
  methods: {
    // 初始加载数据
    async getList(page) {
      this.loading = true;
      try {
        let paprms = {
          page: page.currentPage,
          limit: page.pageSize,
        };
        let {
          data: { list, total },
        } = await getProjectList(paprms);
        this.page.total = total;
        this.tableData = list;
        setTimeout(() => {
          this.loading = false;
        }, 300);
      } catch (error) {
        this.loading = false;
        this.$message.error(error);
      }
    },
    // 编辑项目
    async handleUpdate(row, index, done, loading) {
      console.log(row);
      try {
        if (this.img_url) {
          row.img_url = this.img_url;
        }
        // if(this.categoryId){
        //   row.category_id = this.categoryId;
        // }
        await editProject(row);
        this.$message.success("修改成功");
        this.refreshChange();
        done();
      } catch (error) {
        done();
        this.$message.error(error);
      }
    },
    // 新增项目
    async handleSave(row, index, done, loading) {
      try {
        if (this.img_url) {
          row.img_url = this.img_url;
        }
        await saveProject(row);
        this.$message.success("新增成功");
        this.refreshChange();
        done();
      } catch (error) {
        done();
        this.$message.error(error);
      }
    },
    // 删除
    async handleDel(row, index) {
      try {
        let opertion = await this.$confirm("是否确认删除此数据", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        await delProject(row._id);
        this.$message.success("删除成功");
        this.refreshChange();
      } catch (error) {
        if (error != "cancel") {
          this.$message.error(error);
        }
      }
    },
    // 刷新
    refreshChange() {
      this.getList(this.page);
    },
    beforeOpen(done, type, index) {
      if (type == "add") {
        this.isEdit = false;
      } else {
        this.isEdit = true;
      }
      getList2().then(({ data }) => {
        this.categoryList = data.list;
      });
      done();
    },
    // 获取图片资源id
    getImgs(e) {
      this.img_url = e[0];
    },
  },
};
</script>
